<template>
  <view class="container">
    <!-- Tab切换模块 -->
    <view class="tabs-container">
      <u-tabs :list="voucherList" @click="clicktabs" lineHeight="5rpx" lineWidth="100rpx" :scrollable="voucherList.length > 4"> </u-tabs>
    </view>

    <view class="content-wrapper" v-if="voucherList.length > 0">
      <!-- 基本信息模块 -->
      <view class="section-card">
        <view class="section-header">
          <image class="section-icon" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/10/10/风车_20251010084002A010.png"> </image>
          <text class="section-title">基础信息</text>
          <view class="delete-btn-wrapper">
            <button class="delete-btn" @click="delVoucher">删除</button>
          </view>
        </view>

        <view class="form-item">
          <text class="form-label">活动券:</text>
          <input v-model="voucherForm.name" @blur="setList(voucherForm)" class="form-input" placeholder="请填写活动券名称" />
        </view>

        <view class="form-item">
          <text class="form-label">活动券数量:</text>
          <input type="number" v-model.number="voucherForm.number" class="form-input" placeholder="请输入活动券数量" />
        </view>

        <view class="form-item">
          <text class="form-label">限购:</text>
          <input type="number" v-model.number="voucherForm.purchaseLimit" class="form-input" placeholder="请输入限购数量" />
        </view>

        <view class="form-item">
          <text class="form-label">活动券图标:</text>
          <view class="upload-wrapper">
            <u-upload
              :fileList="voucherForm.fileList"
              @afterRead="afterRead"
              height="200"
              width="200"
              @delete="deletePic"
              :name="voucherForm.id"
              :maxCount="1"
              :previewFullImage="true"
            >
              <view class="upload-area">
                <image v-if="voucherForm.icon" :src="imgurl + voucherForm.icon" class="upload-image"> </image>
                <u-icon v-else name="plus" size="28" color="#999"></u-icon>
                <text class="upload-text" v-if="!voucherForm.icon">上传图标</text>
              </view>
            </u-upload>
          </view>
        </view>
      </view>

      <!-- 详细信息模块 -->
      <view class="section-card">
        <view class="section-header">
          <image class="section-icon" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/10/10/风车_20251010084002A010.png"> </image>
          <text class="section-title">详细信息</text>
        </view>
        <view class="form-item">
          <text class="form-label">商品说明</text>
          <view class="editor-wrapper">
            <Rboy-editor ref="RboyEditor" @uploadFile="uploadFile" :count="6"></Rboy-editor>
          </view>
        </view>
        <!--  <view class="form-item">
          <text class="form-label">活动详情图片:</text>
          <view class="upload-wrapper">
            <u-upload
              :fileList="voucherForm.detailFileList"
              @afterRead="afterReadDetail"
              height="200"
              width="200"
              @delete="deleteDetailPic"
              :name="voucherForm.id"
              :maxCount="1"
              :previewFullImage="true"
            >
              <view class="upload-area">
                <image v-if="voucherForm.graphicInfo" :src="imgurl + voucherForm.graphicInfo" class="upload-image"> </image>
                <u-icon v-else name="plus" size="28" color="#999"></u-icon>
                <text class="upload-text" v-if="!voucherForm.graphicInfo">上传详情图</text>
              </view>
            </u-upload>
          </view>
        </view> -->

        <view class="form-item">
          <text class="form-label">价格:</text>
          <input type="digit" v-model.number="voucherForm.price" class="form-input" placeholder="请输入价格" />
        </view>

        <!--     <u-cell size="large" title="积分返还:" :value="typeValue" @click="getTypelx" isLink> </u-cell> -->

        <!--      <view class="form-item" v-if="voucherForm.isIntegral == 1">
          <text class="form-label">返还积分:</text>
          <input type="number" v-model.number="voucherForm.integralGive" class="form-input" placeholder="请输入返还积分" />
        </view> -->

        <view class="form-item">
          <text class="form-label">折扣计算方式:</text>
          <u-radio-group v-model="voucherForm.integralComunityDiscountType" placement="column" class="radio-group">
            <u-radio :name="'1'" size="30" iconSize="20" labelSize="30" label="固定值" activeColor="#007aff"> </u-radio>
            <u-radio :name="'2'" size="30" iconSize="20" labelSize="30" label="比例" activeColor="#007aff"> </u-radio>
            <u-radio :name="'0'" size="30" iconSize="20" labelSize="30" label="不使用" activeColor="#007aff"> </u-radio>
          </u-radio-group>
        </view>
        <view class="form-item">
          <text class="form-label">积分换算比例:</text>
          <input type="digit" v-model.number="voucherForm.integralPropertyConversion" class="form-input" placeholder="多少分抵扣一元" />
          <text class="hint-text" v-if="voucherForm.integralPropertyConversion > 0"> {{ voucherForm.integralPropertyConversion }}积分=1元 </text>
        </view>
        <view class="form-item" v-if="voucherForm.integralComunityDiscountType == 1">
          <text class="form-label">可抵扣金额:</text>
          <input type="digit" v-model.number="deductionAmount" class="form-input" placeholder="请输入希望抵扣的金额" />
          <text class="hint-text" v-if="voucherForm.integralPropertyConversion > 0 && deductionAmount > 0">
            (需要使用{{ requiredPoints }}积分，最多可抵扣{{ deductionAmount }}元)
          </text>
        </view>
        <view class="form-item" v-if="voucherForm.integralComunityDiscountType == 2">
          <text class="form-label">积分抵扣比例:</text>
          <input type="digit" v-model.number="voucherForm.integralComunityDiscount" class="form-input" placeholder="最大抵扣：如0.1，代表10%" />
        </view>

        <view class="form-item" v-if="voucherForm.integralComunityDiscountType == 2 || voucherForm.integralComunityDiscountType == 1">
          <text class="form-label">积分抵扣后价格:</text>
          <input type="digit" v-model.number="voucherForm.integralComunityDiscountPrice" disabled class="form-input disabled-input" placeholder="自动计算（价格-抵扣金额）" />
        </view>

        <u-cell size="large" title="自动核销:" :value="autoValue" @click="getAutoType" isLink> </u-cell>

        <!--  <view class="form-item">
          <text class="form-label">推广佣金:</text>
          <input type="digit" v-model.number="voucherForm.promotionCommissions" class="form-input" placeholder="请输入推广佣金" />
        </view>
 -->
        <!--  <view class="form-item">
          <view class="product-selector" @click="showRight = true">
            <text>点击关联商品</text>
            <image src="../../static/z/jia.png" class="add-icon"> </image>
          </view>
        </view> -->

        <!-- 商品选择弹窗 -->
        <u-picker :show="showType" @cancel="showType = false" :columns="columns" keyName="categoryName" @confirm="getTsType"> </u-picker>

        <u-picker :show="showAutoType" @cancel="showAutoType = false" :columns="columns" keyName="categoryName" @confirm="getAutoTsType"> </u-picker>

        <u-popup :show="showRight" mode="right" @close="close" @open="open" :closeOnClickOverlay="false" :round="10">
          <view class="popup-container">
            <view class="search-bar">
              <input v-model="keywords" class="search-input" placeholder="请输入商品名称，关键字，商品ID" />
              <button class="search-btn" @click="searchProduct">搜索</button>
            </view>

            <scroll-view class="scroll-area" scroll-y="true">
              <view v-for="(item, index) in spData" :key="index" @click="selectSp(item)" :class="['product-item', { selected: item.isSelecd }]">
                <view class="product-content">
                  <image :src="imgurl + item.image" class="product-image"> </image>
                  <view class="product-info">
                    <text class="product-name">{{ item.storeName }}</text>
                    <text class="product-price">￥{{ item.price }}</text>
                  </view>
                  <u-icon v-if="item.isSelecd" name="checkmark-circle-fill" color="#007aff" size="24" class="check-icon"> </u-icon>
                </view>
              </view>
            </scroll-view>

            <view class="popup-footer">
              <button class="confirm-btn" @click="confirmSelection">确认</button>
            </view>
          </view>
        </u-popup>

        <!-- 所选商品列表 -->
        <view class="selected-products" v-if="okSpForm.length > 0">
          <view v-for="(item, index) in okSpForm" :key="index" class="selected-product-item">
            <view class="product-info">
              <text class="product-name">{{ item.name }}</text>
              <text class="product-price">￥{{ item.price }}</text>
            </view>
            <view class="product-quantity">
              <input v-model.number="item.unmber" type="number" min="0" class="quantity-input" @blur="updateProductQuantity(index)" />
            </view>
          </view>
        </view>
      </view>

      <!-- 保存按钮 -->
      <view class="save-btn-wrapper">
        <u-button type="primary" @click="addOwner" shape="circle" :loading="saving"> 保存 </u-button>
      </view>
    </view>

    <!-- 新增消费券按钮 -->
    <view class="add-voucher-btn" v-if="addBtnShow">
      <u-button type="primary" shape="circle" icon="plus" @click="addVoucher"> </u-button>
    </view>
  </view>
</template>

<script>
import { categorylist, addOrUpdateReId, merlist, activityById, productlist, addOrUpdateGather, delProduct, delTicket } from '../../utils/request_sh.js';
import { IMG_URL } from '../../config/index.js';
import RboyEditor from '../../components/Rboy-editor/Rboy-editor.vue';
export default {
  components: {
    // ... existing code ...
    RboyEditor
  },
  data() {
    return {
      imgurl: IMG_URL,
      addBtnShow: true,
      deductionAmount: 0, // 新增用于存储用户输入的抵扣金额
      saving: false,
      voucherForm: {
        id: '',
        name: '',
        number: '',
        purchaseLimit: '',
        price: '',
        integralGive: '',
        integralComunityDiscount: '',
        integralComunityDiscountType: 0,
        integralComunityValueDiscount: '',
        integralComunityDiscountPrice: '',
        promotionCommissions: '',
        isIntegral: 0,
        isAuto: 0,
        icon: '',
        graphicInfo: '',
        fileList: [],
        detailFileList: [],
        ebMerActivityTicketProductList: [],
        integralPropertyConversion: ''
      },
      showRight: false,
      typeValue: '关闭',
      autoValue: '关闭',
      showType: false,
      showAutoType: false,
      columns: [],
      voucherList: [],
      okSpForm: [],
      keywords: '',
      spData: [],
      id: '',
      msrp: ''
      /* offlineDeductionPropertyType: 0 */
    };
  },

  onLoad(option) {
    this.id = option.id;
    this.msrp = option.msrp;
    this.voucherForm.integralPropertyConversion = uni.getStorageSync('integralPropertyConversion') || 0;
    this.offlineDeductionPropertyType = uni.getStorageSync('offlineDeductionPropertyType') || 0;
    /*   this.voucherForm.integralComunityDiscountType = this.offlineDeductionPropertyType; */
    this.getDataSp().then(() => {
      if (this.id) {
        this.getSpInfo(this.id);
      }
    });
  },

  computed: {
    // 根据积分兑换比例计算最大可抵扣金额
    /*     maxDeductionByPoints() {
      if (this.voucherForm.integralPropertyConversion <= 0 || !this.voucherForm.integralComunityValueDiscount) {
        return 0;
      }
      return (this.voucherForm.integralComunityValueDiscount / this.voucherForm.integralPropertyConversion).toFixed(2);
    }, */

    // 计算需要的积分数量
    requiredPoints() {
      if (this.voucherForm.integralPropertyConversion <= 0 || !this.deductionAmount) {
        return 0;
      }
      return this.deductionAmount * this.voucherForm.integralPropertyConversion;
    }
  },
  watch: {
    deductionAmount(newVal) {
      // 当抵扣金额变化时，直接更新integralComunityValueDiscount字段
      this.voucherForm.integralComunityValueDiscount = newVal;
      this.calculateDiscountedPrice();
    },
    'voucherForm.price'(newVal) {
      this.calculateDiscountedPrice();
    },
    'voucherForm.integralComunityDiscount'(newVal) {
      this.calculateDiscountedPrice();
    },
    'voucherForm.integralComunityValueDiscount'(newVal) {
      this.calculateDiscountedPrice();
    },
    'voucherForm.integralComunityDiscountType'(newVal) {
      this.calculateDiscountedPrice();
    },
    'voucherForm.integralPropertyConversion'(newVal) {
      this.calculateDiscountedPrice();
    }
  },

  methods: {
    async set_content() {
      if (this.$refs.RboyEditor && this.voucherForm.graphicInfo) {
        this.$refs.RboyEditor.editor_setContents(this.voucherForm.graphicInfo);
      }
    },

    async get_content() {
      if (this.$refs.RboyEditor) {
        this.voucherForm.graphicInfo = await this.$refs.RboyEditor.editor_getcontents();
      }
    },

    async uploadFile(event) {
      for (let item in event.tempFilePaths) {
        let src = await this.uploadFilePromise(event.tempFilePaths[item]);
        this.$refs.RboyEditor.editor_insertImage({
          src: this.imgurl + src.fileName,
          alt: '图像'
        });
      }
    },
    setList(e) {
      if (!this.addBtnShow) {
        this.voucherList.pop();
        this.voucherList.push(e);
        this.clicktabs(e);
        this.$forceUpdate();
      }
    },

    // 计算抵扣后价格
    calculateDiscountedPrice() {
      const price = parseFloat(this.voucherForm.price) || 0;

      if (this.voucherForm.integralComunityDiscountType == 1) {
        // 固定值折扣 - 直接使用抵扣金额
        let discountValue = parseFloat(this.voucherForm.integralComunityValueDiscount) || 0;
        this.voucherForm.integralComunityDiscountPrice = (price - discountValue).toFixed(2);
      } else if (this.voucherForm.integralComunityDiscountType == 2) {
        // 比例折扣
        const discountRatio = this.voucherForm.integralComunityDiscount ? parseFloat(this.voucherForm.integralComunityDiscount) : 0 || 0;
        this.voucherForm.integralComunityDiscountPrice = (price * (1 - discountRatio)).toFixed(2);
      } else {
        // 不使用折扣
        this.voucherForm.integralComunityDiscountPrice = price.toFixed(2);
      }

      // 确保价格不低于0
      if (this.voucherForm.integralComunityDiscountPrice < 0) {
        this.voucherForm.integralComunityDiscountPrice = 0;
      }
    },

    // 更新商品数量
    updateProductQuantity(index) {
      const item = this.okSpForm[index];
      if (item && item.unmber < 0) {
        item.unmber = 0;
      }

      // 同步更新spData中的数量
      const spItem = this.spData.find((sp) => sp.id === item.ebStoreProductId);
      if (spItem) {
        spItem.unmber = item.unmber;
      }
    },

    // 选择商品
    selectSp(item) {
      const spDataIndex = this.spData.findIndex((spItem) => spItem.id === item.id);
      if (spDataIndex !== -1) {
        const selected = !this.spData[spDataIndex].isSelecd;
        this.spData[spDataIndex].isSelecd = selected;

        if (selected) {
          // 设置默认数量为1
          if (!this.spData[spDataIndex].unmber) {
            this.spData[spDataIndex].unmber = 1;
          }

          this.okSpForm.push({
            ebStoreProductId: item.id,
            name: item.storeName,
            unmber: this.spData[spDataIndex].unmber,
            price: item.price,
            inventory: item.stock,
            propertyPoints: 0,
            consumePoints: 0,
            pointsReturn: 0
          });
        } else {
          // 取消选择
          this.okSpForm = this.okSpForm.filter((spForm) => spForm.ebStoreProductId !== item.id);
        }
      }
    },

    // 获取商品列表数据
    getDataSp() {
      return new Promise((resolve) => {
        const userInfo = uni.getStorageSync('userInfo');
        const merId = userInfo ? userInfo.merId : '';
        const params = {
          ebMerId: merId,
          userRightComand: 'shanghuAdmin',
          storeType: 3,
          keywords: this.keywords
        };

        this.spData = [];
        productlist(params)
          .then((res) => {
            if (res.code == 200) {
              res.rows.forEach((item) => {
                item.isSelecd = false;
                this.spData.push(item);
              });
              resolve();
            }
          })
          .catch(() => {
            resolve();
          });
      });
    },

    // 获取商品详情
    getSpInfo(id, b) {
      return activityById(id).then((res) => {
        if (res.code === 200) {
          this.voucherList = res.data.ebMerActivityTicketList || [];
          if (this.voucherList.length > 0 && !b) {
            this.clicktabs(this.voucherList[0]);
          }
        }
      });
    },

    // 打开积分返还选择器
    getTypelx() {
      this.showType = true;
      this.columns = [
        [
          { categoryName: '开启', merchantCategoryId: 1 },
          { categoryName: '关闭', merchantCategoryId: 0 }
        ]
      ];
    },

    // 打开自动核销选择器
    getAutoType() {
      this.showAutoType = true;
      this.columns = [
        [
          { categoryName: '开启', merchantCategoryId: 1 },
          { categoryName: '关闭', merchantCategoryId: 0 }
        ]
      ];
    },

    // tabs切换
    clicktabs(item) {
      if (!item) return;

      this.voucherForm = {
        ...item,
        fileList: item.icon ? [{ url: this.imgurl + item.icon }] : [],
        detailFileList: item.graphicInfo ? [{ url: this.imgurl + item.graphicInfo }] : []
      };
      // 直接使用integralComunityValueDiscount作为抵扣金额
      this.deductionAmount = this.voucherForm.integralComunityValueDiscount || 0;
      this.typeValue = this.voucherForm.isIntegral == 1 ? '开启' : '关闭';
      this.autoValue = this.voucherForm.isAuto == 1 ? '开启' : '关闭';

      // 重置关联商品选择状态
      this.okSpForm = [];
      if (this.voucherForm.ebMerActivityTicketProductList) {
        this.voucherForm.ebMerActivityTicketProductList.forEach((product) => {
          this.okSpForm.push({ ...product });

          // 更新spData中的选择状态
          const spItem = this.spData.find((item) => item.id === product.ebStoreProductId);
          if (spItem) {
            spItem.isSelecd = true;
            spItem.unmber = product.unmber || 1;
          }
        });
      }

      // 重新计算价格
      this.$nextTick(() => {
        this.calculateDiscountedPrice();
        setTimeout(() => {
          this.set_content();
        }, 1000);
      });
    },

    // 删除图片
    deletePic(event) {
      this.voucherForm.fileList.splice(event.index, 1);
      this.voucherForm.icon = '';
    },

    // 上传文件处理
    async afterRead(event) {
      this.voucherForm.fileList = [event.file];
      const result = await this.uploadFilePromise(event.file.url);
      this.voucherForm.icon = result.fileName;
    },

    // 处理活动详情图片上传
    async afterReadDetail(event) {
      this.voucherForm.detailFileList = [event.file];
      const result = await this.uploadFilePromise(event.file.url);
      this.voucherForm.graphicInfo = result.fileName;
    },

    // 删除活动详情图片
    deleteDetailPic(event) {
      this.voucherForm.detailFileList.splice(event.index, 1);
      this.voucherForm.graphicInfo = '';
    },

    // 确认选择的积分返还类型
    getTsType({ value }) {
      this.showType = false;
      this.typeValue = value[0].categoryName;
      this.voucherForm.isIntegral = value[0].merchantCategoryId;
    },

    // 确认选择的自动核销类型
    getAutoTsType({ value }) {
      this.showAutoType = false;
      this.autoValue = value[0].categoryName;
      this.voucherForm.isAuto = value[0].merchantCategoryId;
    },

    // 保存活动信息

    // 保存活动信息
    // 修改addOwner方法以处理富文本内容
    addOwner() {
      if (this.saving) return;

      // 数据验证
      if (!this.voucherForm.name) {
        uni.showToast({ title: '请输入活动券名称', icon: 'none' });
        return;
      }

      if (!this.voucherForm.number || this.voucherForm.number <= 0) {
        uni.showToast({ title: '请输入有效的活动券数量', icon: 'none' });
        return;
      }

      /*       if (!this.voucherForm.price || this.voucherForm.price < 0) {
        uni.showToast({ title: '请输入有效的价格', icon: 'none' });
        return;
      } */

      if (this.voucherForm.isIntegral == 1 && (!this.voucherForm.integralGive || this.voucherForm.integralGive <= 0)) {
        uni.showToast({ title: '请输入返还积分', icon: 'none' });
        return;
      }

      this.saving = true;
      console.log('🚀 ~ voucherForm.integralComunityDiscount:', this.voucherForm.integralComunityDiscount);

      // 获取富文本内容
      this.get_content().then(() => {
        // 更新当前voucherForm到voucherList中
        const currentIndex = this.voucherList.findIndex((item) => item.id === this.voucherForm.id);
        if (currentIndex !== -1) {
          // 如果是已存在的活动券，更新它
          this.voucherList.splice(currentIndex, 1, {
            ...this.voucherForm,
            ebMerActivityTicketProductList: this.okSpForm
          });
        } else if (!this.addBtnShow) {
          // 如果是新增但未保存的活动券，添加到列表中
          this.voucherList.push({
            ...this.voucherForm,
            ebMerActivityTicketProductList: this.okSpForm
          });
        }

        const ebMerActivity = {
          id: this.id,
          ebMerActivityTicketList: this.voucherList.map((item) => ({
            ...item,
            fileList: undefined,
            detailFileList: undefined
          }))
        };

        addOrUpdateGather(ebMerActivity)
          .then((res) => {
            if (res.code === 200) {
              uni.showToast({ title: '保存成功', icon: 'success' });
              this.addBtnShow = true;
              // 保存成功后重新加载数据并保持当前选中的tab
              return this.getSpInfo(this.id, 222).then(() => {
                // 如果voucherList中有元素，则选中第一个或与当前相同ID的项
                if (this.voucherList.length > 0) {
                  const currentId = this.voucherForm.id;
                  let targetItem = this.voucherList[this.voucherList.length - 1]; // 默认选中最后一个（新增的）
                  if (currentId) {
                    const foundItem = this.voucherList.find((item) => item.id === currentId);
                    if (foundItem) {
                      targetItem = foundItem;
                    }
                  }
                  this.$nextTick(() => {
                    this.clicktabs(targetItem);
                  });
                }
              });
            } else {
              uni.showToast({ title: res.msg || '保存失败', icon: 'none' });
            }
          })
          .catch(() => {
            uni.showToast({ title: '保存失败', icon: 'none' });
          })
          .finally(() => {
            this.saving = false;
          });
      });
    },

    // 选择商品确认按钮
    confirmSelection() {
      this.showRight = false;
    },

    // 搜索商品
    searchProduct() {
      this.getDataSp();
    },

    // 上传文件请求
    uploadFilePromise(url) {
      const userInfo = uni.getStorageSync('userInfo');
      const token = userInfo ? userInfo.token : '';

      return new Promise((resolve, reject) => {
        uni.uploadFile({
          header: {
            Authorization: token
          },
          url: this.imgurl + '/api/adminApph7/common/upload',
          filePath: url,
          name: 'file',
          formData: {},
          success: (res) => {
            try {
              const data = JSON.parse(res.data);
              if (data.code === 200) {
                resolve(data);
              } else {
                reject(new Error(data.msg || '上传失败'));
              }
            } catch (e) {
              reject(e);
            }
          },
          fail: (err) => {
            reject(err);
          }
        });
      });
    },

    // 右侧弹窗打开处理
    open() {
      // 弹窗打开逻辑
    },

    // 右侧弹窗关闭处理
    close() {
      this.showRight = false;
    },

    // 新增消费券
    addVoucher() {
      this.addBtnShow = false;
      const newVoucher = {
        name: '',
        number: '',
        purchaseLimit: '',
        icon: '',
        graphicInfo: '',
        fileList: [],
        detailFileList: [],
        price: this.msrp || '',
        isIntegral: 0,
        integralGive: '',
        integralComunityDiscount: '', // 确保该字段被初始化
        integralComunityDiscountType: this.offlineDeductionPropertyType || 0,
        integralComunityValueDiscount: '',
        integralComunityDiscountPrice: '',
        promotionCommissions: '',
        ebMerActivityTicketProductList: [],
        isAuto: 0
      };

      this.voucherList.push(newVoucher);
      this.$nextTick(() => {
        // 确保在DOM更新后正确切换到新添加的tab
        /*  const lastIndex = this.voucherList.length - 1;
        console.log('🚀 ~ lastIndex:', lastIndex); */
        this.clicktabs(newVoucher);
      });
    },

    // 删除活动券
    delVoucher() {
      if (!this.voucherForm.id) {
        // 删除新增但未保存的券
        this.voucherList.pop();
        if (this.voucherList.length > 0) {
          this.$nextTick(() => {
            this.clicktabs(this.voucherList[0]);
          });
        } else {
          // 如果没有活动券了，重置表单
          this.voucherForm = {
            id: '',
            name: '',
            number: '',
            purchaseLimit: '',
            price: '',
            integralGive: '',
            integralComunityDiscount: '',
            integralComunityDiscountType: 0,
            integralComunityValueDiscount: '',
            integralComunityDiscountPrice: '',
            promotionCommissions: '',
            isIntegral: 0,
            isAuto: 0,
            icon: '',
            graphicInfo: '',
            fileList: [],
            detailFileList: [],
            ebMerActivityTicketProductList: []
          };
          this.okSpForm = [];
        }
        this.addBtnShow = true;
        return;
      }

      uni.showModal({
        title: '提示',
        content: '确定要删除吗？',
        success: (res) => {
          if (res.confirm) {
            delTicket(this.voucherForm.id)
              .then((res) => {
                if (res.code === 200) {
                  uni.showToast({ title: '删除成功', icon: 'success' });
                  // 重新加载数据
                  this.getSpInfo(this.id).then(() => {
                    this.addBtnShow = true;
                  });
                } else {
                  uni.showToast({ title: res.msg || '删除失败', icon: 'none' });
                }
              })
              .catch(() => {
                uni.showToast({ title: '删除失败', icon: 'none' });
              });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.tabs-container {
  background-color: #fff;
  border-bottom: 1px solid #ededed;
}

.content-wrapper {
  padding: 20rpx;
}

.section-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.delete-btn-wrapper {
  margin-left: auto;
}

.delete-btn {
  background-color: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 50%;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
}

.form-item {
  margin-bottom: 30rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
}

.hint-text {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}
.editor-wrapper {
  border: 2rpx solid #ebedf0;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
}
.form-input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  font-size: 28rpx;
  box-sizing: border-box;

  &.disabled-input {
    background-color: #f0f0f0;
    color: #999;
  }
}

.radio-group {
  padding: 10rpx 0;

  ::v-deep .u-radio {
    margin-bottom: 15rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.upload-wrapper {
  display: flex;
  align-items: center;
}

.upload-area {
  width: 200rpx;
  height: 200rpx;
  border: 2rpx dashed #ddd;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
}

.upload-image {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 10rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #999;
}

.product-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.add-icon {
  width: 40rpx;
  height: 40rpx;
}

.popup-container {
  width: 600rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.search-bar {
  display: flex;
  padding: 20rpx;
  background-color: #f8f8f8;
}

.search-input {
  flex: 1;
  height: 70rpx;
  padding: 0 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.search-btn {
  width: 120rpx;
  height: 70rpx;
  margin-left: 20rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 10rpx;
  border: none;
  font-size: 28rpx;
}

.scroll-area {
  flex: 1;
  padding: 0 20rpx;
}

.product-item {
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  &.selected {
    border: 2rpx solid #007aff;
  }
}

.product-content {
  display: flex;
  align-items: center;
}

.product-image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.product-info {
  flex: 1;
}

.product-name {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.product-price {
  font-size: 26rpx;
  color: #ff4d4f;
}

.check-icon {
  margin-left: 20rpx;
}

.popup-footer {
  padding: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

.confirm-btn {
  width: 100%;
  height: 80rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 40rpx;
  border: none;
  font-size: 30rpx;
}

.selected-products {
  margin-top: 20rpx;
}

.selected-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  margin-bottom: 20rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.product-quantity {
  display: flex;
  align-items: center;
}

.quantity-input {
  width: 100rpx;
  height: 60rpx;
  padding: 0 10rpx;
  text-align: center;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  background-color: #fff;
}

.save-btn-wrapper {
  padding: 0 20rpx 40rpx;
}

.add-voucher-btn {
  position: fixed;
  bottom: 60rpx;
  right: 40rpx;
  z-index: 1000;
}
</style>
